<!--
 * @Author: your name
 * @Date: 2020-10-19 13:06:07
 * @LastEditTime: 2020-10-19 14:57:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
-->
<template>
  <div class="wrapper">
    <div ref="myMapRef"
         class="container"></div>
  </div>
</template>
<script>
import { ref, onMounted } from "vue"

export default {
  setup() {
    const myMapRef = ref(null) // 定义ref
    const chartMapInit = () => {
      // 创建地图
      const map = new window.AMap.Map(myMapRef.value, {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 4
      })
      // 创建一个 Icon
      const IconMark = new window.AMap.Icon({
        // 图标尺寸
        size: new window.AMap.Size(25, 34),
        // 图标的取图地址
        image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
        // 图标所用图片大小
        imageSize: new window.AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new window.AMap.Pixel(-9, -3)
      })
      // 将 icon 传入 marker
      const marker = new window.AMap.Marker({
        position: new window.AMap.LngLat(116.45, 39.93),
        icon: IconMark,
        draggable: true,
        cursor: "move",
        offset: new window.AMap.Pixel(-13, -30)
      })
      map.add([marker])
      // just some colors
      const colors = [
        "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
        "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
        "#651067", "#329262", "#5574a6", "#3b3eac"
      ]

      window.AMapUI.load(["ui/geo/DistrictExplorer", "lib/$"], (DistrictExplorer, $) => {
        // 创建一个实例
        const districtExplorer = new DistrictExplorer({
          eventSupport: true, // 打开事件支持
          map
        })

        // 当前聚焦的区域
        let currentAreaNode = null

        // 鼠标hover提示内容
        const $tipMarkerContent = $("<div class=\"tipMarker top\"></div>")

        const tipMarker = new window.AMap.Marker({
          content: $tipMarkerContent.get(0),
          offset: new window.AMap.Pixel(0, 0),
          bubble: true
        })

        // 根据Hover状态设置相关样式
        function toggleHoverFeature(feature, isHover, position) {
          tipMarker.setMap(isHover ? map : null)
          if (!feature) {
            return
          }
          const props = feature.properties
          if (isHover) {
            // 更新提示内容
            $tipMarkerContent.html(`${props.adcode}: ${props.name}`)
            // 更新位置
            tipMarker.setPosition(position || props.center)
          }
          // 更新相关多边形的样式
          const polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode)
          polys.forEach((element) => {
            element.setOptions({
              fillOpacity: isHover ? 0.5 : 0.2
            })
          })
        }

        // 监听feature的hover事件
        districtExplorer.on("featureMouseout featureMouseover", (e, feature) => {
          toggleHoverFeature(feature, e.type === "featureMouseover",
            e.originalEvent ? e.originalEvent.lnglat : null)
        })

        // 监听鼠标在feature上滑动
        districtExplorer.on("featureMousemove", (e) => {
          // 更新提示位置
          tipMarker.setPosition(e.originalEvent.lnglat)
        })
        // 绘制某个区域的边界
        function renderAreaPolygons(areaNode) {
          // 更新地图视野
          map.setBounds(areaNode.getBounds(), null, null, true)
          // 清除已有的绘制内容
          districtExplorer.clearFeaturePolygons()
          // 绘制子区域
          districtExplorer.renderSubFeatures(areaNode, (feature, i) => {
            const indexx = colors.length - 1 - (i % colors.length)
            const fillColor = colors[i % colors.length]
            const strokeColor = colors[indexx]
            return {
              cursor: "default",
              bubble: true,
              strokeColor, // 线颜色
              strokeOpacity: 1, // 线透明度
              strokeWeight: 1, // 线宽
              fillColor, // 填充色
              fillOpacity: 0.35 // 填充透明度
            }
          })
        }
        // 切换区域后刷新显示内容
        function refreshAreaNode(areaNode) {
          districtExplorer.setHoverFeature(null)
          renderAreaPolygons(areaNode)
        }
        // 加载区域
        function loadAreaNode(adcode, callback) {
          districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
            if (error) {
              if (callback) {
                callback(error)
              }
              console.error(error)
              return
            }
            if (callback) {
              callback(null, areaNode)
            }
          })
        }
        // 切换区域
        function switch2AreaNode(adcode, callback) {
          if (currentAreaNode && (`${currentAreaNode.getAdcode()}` === `${adcode}`)) {
            return
          }
          loadAreaNode(adcode, (error, areaNode) => {
            if (error) {
              if (callback) {
                callback(error)
              }
              return
            }
            currentAreaNode = areaNode
            // 设置当前使用的定位用节点
            districtExplorer.setAreaNodesForLocating([currentAreaNode])
            refreshAreaNode(areaNode)
            if (callback) {
              callback(null, areaNode)
            }
          })
        }
        // feature被点击
        districtExplorer.on("featureClick", (e, feature) => {
          const props = feature.properties
          switch2AreaNode(props.adcode)
        })

        // 外部区域被点击
        districtExplorer.on("outsideClick", (e) => {
          districtExplorer.locatePosition(e.originalEvent.lnglat, (error, routeFeatures) => {
            if (routeFeatures && routeFeatures.length > 1) {
              // 切换到省级区域
              switch2AreaNode(routeFeatures[1].properties.adcode)
            } else {
              // 切换到全国
              switch2AreaNode(100000)
            }
          }, {
            levelLimit: 2
          })
        })
        // 全国
        switch2AreaNode(100000)
      })
    }
    onMounted(() => {
      chartMapInit()
    })
    return { myMapRef }
  }
}
</script>
<style lang="scss" scoped >
.wrapper {
  width: 100vw;
  height: 100vh;
  position: absolute;
  margin: 0;
  padding: 0;
  color: #ffffff;
  .container {
    height: 100vh;
  }
}
</style>
